<template>
  <div>
    <div class="message_title top">
      <table>
        <tr>
          <td>
            <div class="name">发布人：{{ adminName }}</div>
          </td>
          <td rowspan="2">
            <div class="messageId">{{ messageObj.messageId }}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="createDate">发布时间：{{ item.createDate }}</div>
          </td>
        </tr>
      </table>
    </div>
    <hr />
    <div class="messageStr">
      {{ messageObj.messageStr }}
    </div>
    <el-button
      type="warning"
      icon="el-icon-caret-left"
      circle
      class="back"
      @click="goBack()"
    ></el-button>
  </div>
</template>

<script>
export default {
  created() {
    const item = this.$route.params.item

    // 如果没有参数则返回跳转
    if (item == null || !item || item === undefined) {
      this.goBack()
      return
    }

    this.item = item

    // 发起axios请求
    this.$http
      .get('worker/get-admin-name', {
        params: {
          workId: item.adminId
        }
      })
      .then(res => {
        this.adminName = res.data.data
      })
      .catch(() => {
        this.$message.error('查看失败')
        this.goBack()
      })

    this.$http
      .get('worker/message', {
        params: {
          messageId: item.messageId
        }
      })
      .then(res => {
        this.messageObj = res.data.data
      })
      .catch(() => {
        this.$message.error('查看失败')
        this.goBack()
      })
  },
  data() {
    return {
      item: {},
      adminName: '',
      messageObj: {}
    }
  },
  methods: {
    goBack() {
      this.$router.push({
        path: this.$router.go(-1)
      })
    }
  }
}
</script>

<style   lang="less"  scoped>
.top {
  width: 100%;
  position: relative;
  margin-top: 8px;
  font-weight: bold;
  color: rgb(129, 129, 129);
  table {
    width: 100%;
  }
  .messageId {
    font-size: 50px;
  }

  .name {
    margin-bottom: 10px;
  }

  .createDate {
    margin-top: 8px;
    color: silver;
    font-size: 10px;
  }
}

.message_title {
  margin-bottom: 20px;
}

.messageStr {
  float: right;
  color: #535353;
  margin-bottom: 10px;
}

.back {
  position: fixed;
  bottom: 10%;
  left: 80%;
  z-index: 10;
}
</style>
